<template>
  <div class="page">

    <div class="block" >
      <div class="tien-bar bg-white">
        <div class='action'>
          <span class='icon-title text-blue'></span>背景
        </div>
      </div>
      <div class="cu-load bg-blue over"></div>
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>加载状态
        </div>
        <div class='action'>
          <switch class='sm isLoading' bindchange='isLoading'></switch>
        </div>
      </div>
      <div class="cu-load bg-grey over"></div>
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>加载错误
        </div>
      </div>
      <div class="cu-load bg-red erro"></div>

      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>弹框加载
        </div>
        <div class='action'>
          <button class='cu-btn bg-green shadow' bindtap='loadModal'>
            点我
          </button>
        </div>
      </div>
      
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='icon-title text-blue'></span>进度条加载
        </div>
        <div class='action'>
          <button class='cu-btn bg-green shadow' bindtap='loadProgress'>
            点我
          </button>
        </div>
      </div>
      <div class='load-progress show' style="top:40px;">
        <div class="load-progress-bar bg-green" style="transform: translate3d(-99%, 0px, 0px);"></div>
        <div class='load-progress-spinner text-green'></div>
      </div>



      
    </div>






  </div>
</template>

<script>
export default {
  name:'loading',
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

